React Native for Web + TypeScriptでGoogleTagManagerを使ってみた

otas

2020.04.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

CX事業本部の太田です。

React Native for Web + TypeScriptでGoogleTagManager(以後GTM)を使ってみたのでご紹介します。

GTMとは

GTMはタグやトリガーを設定して、GoogleAnalytics(以後GA)へのイベント送信を行えるGoogleが提供するツールです。
無料で提供されており、誰でも使えます。

GTMを組み込む

まずは、GTMを使えるようにHTMLに設定を追記します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->

    ...省略

  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->

    ...省略

  </body>
</html>

GTM-XXXXXXXの部分は利用するGTMに合わせて変更してください。

プレビューモード

GTMが組み込まれたか、プレビューモードを使って確認してみます。
管理画面でプレビューボタンをクリックします。

しばらく待つとプレビューモード状態になります。

終了する場合は、プレビューモードを終了をクリックすればOKです。

ページにアクセスして下部にGTM用のUIが表示されれば組み込みはOKです。

プレビューモードを使えばGTMで設定した内容が正しく動きているかも確認できます。

最終的にはGTMを公開する必要がありますが、作業中に一旦動作を確認するのにプレビューモードを使います。

トラッキングID用の変数を作成

イベンント送信先のGAのトラッキングIDは、色んなところで使うので変数としておくと便利です。

GTMの管理画面から変数-ユーザー定義変数-新規を選択
変数のタイプから、Google アナリティクス設定を選択
トラッキング IDに、送信したGAのトラッキングIDを入力
変数の名前を入力して、保存をクリックして作成完了

トラッキングIDの確認方法はここを参考にしてください。

ページビュー(PV)の計測

ページビュー(以後PV)を計測する設定を行ってみます。

トリガーの設定

トリガーはページ内でどういった操作をした場合に、GTMに反応させるかを決めるものになります。
PV用のトリガーは標準で用意されていますが、SPA(Single Page Application)の場合は正しく動作しません。
SPA用に別トリガーを作ります。

GTMの管理画面からトリガー-新規を選択
トリガーのタイプから履歴の変更を選択
トリガーの名前を入力して、保存をクリックすれば作成完了

タグの設定

タグは、どのトリガーで、GAに対してどういったイベントを送信するかを決めるものになります。

GTMの管理画面からタグ-新規を選択
タグのタイプからGoogle アナリティクス: ユニバーサルアナリティクスを選択
タイプの設定を以下のようにします
　　・ トラッキングタイプはページビューを選択
　　・ Google アナリティクス設定は、先ほど作ったトラッキングID用の変数を指定
GAに送信するトリガーを選択
　　・今回はAll Pagesと先ほど作成した履歴の変更の両方を設定
　　 All Pagesは、GTMで用意されているPV用のトリガーです
　　 All Pagesも入れた理由は最初のページの場合、履歴の変更ではイベントが送られないので入れています
タグの名前を入力して、保存をクリックして作成完了

動作を確認

プレビューモードにしてページ内で遷移などをしてみれば、設定したタグが反応しているが分かるかと思います。

イベントの計測

今度はボタンがクリックされた際に、GAにイベントを送ってみます。
また、どのボタンが押されたかが判別できるように、データーレイヤー変数というものを使ってみたいと思います。

データーレイヤー変数を追加

GTMの管理画面から変数-ユーザー定義変数-新規を選択
変数のタイプから、データーレイヤー変数を選択
データーレイヤー変数名を入力
変数の名前を入力して、保存をクリックして作成完了

トリガーの設定

GTMの管理画面からトリガー-新規を選択
トリガーのタイプからカスタムイベントを選択
イベント名を入力
一部のカスタムイベンントのラジオボタンにチェックをつける
Event-等しい-手順3と同じ名前で設定
トリガーの名前を入力して、保存をクリックして作成完了

タグの設定

GTMの管理画面からタグ-新規を選択
タグのタイプからGoogle アナリティクス: ユニバーサルアナリティクスを選択
タイプの設定を以下のようにします。
　　・ トラッキングタイプはイベントを選択
　　・ カテゴリ、アクションを任意で入力
　　・ ラベルには先ほど作成したデーターレイヤー変数を指定
　　・ Google アナリティクス設定は、先ほど作ったトラッキングID用の変数を指定
GAに送信するトリガーは、先ほど作成したトリガーを指定
タグの名前を入力して、保存をクリックして作成完了

ソースの修正

まずはdatalayerを使えるように、定義ファイルを作成します。

declare global {
  interface Window {
    dataLayer: Array<Object>;
  }
}

こちらの詳細は以下の記事を参考になります。
TypeScript で window 直下にいろいろ生やしたりグローバル変数を定義する

次にボタンのクリックイベントで、上記で追加したwindow.dataLayerに対して情報をプッシュします。

const { dataLayer } = window;

const onPress = React.useCallback(() => {
  dataLayer.push({
    event: "button_click", // トリガーで設定したイベント名を指定
    button_name: "hoge",  // データーレイヤー変数で作った変数名と値をKeyValueで指定　
  });
});

<TouchableOpacity onPress={onPress}>
  <Text>hoge</Text>
</TouchableOpacity>